<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0"/>
    <meta http-equiv="X-UA-Compatible" content="ie=edge"/>
    <title>订单记录</title>
    <link href="../../../static/css/bootstrap.css" type="text/css" media="screen" rel="stylesheet"/>
    <link rel="stylesheet" type="text/css" href="../../../static/css/dateRange.css"/>
    <link href="../../../static/css/set-meal.css" type="text/css" media="screen" rel="stylesheet"/>

    <script type="text/javascript" src="../../../static/js/jquery.js"></script>
<script type="text/javascript" src="../../../static/js/echarts.common.min.js"></script>
<script type="text/javascript" src="../../../static/js/dateRange.js"></script>
<script type="text/javascript" src="../../../static/js/monthPicker.js"></script>
<script type="text/javascript" src="../../../static/js/jquery.ui.core.js"></script>
<script type="text/javascript" src="../../../static/js/jquery.ui.widget.js"></script>
<script type="text/javascript" src="../../../static/js/jquery.ui.mouse.js"></script>
<script type="text/javascript" src="../../../static/js/jquery.ui.sortable.js"></script>
<script type="text/javascript" src="../../../static/js/bootstrap.js"></script>
<script type="text/javascript" src="../../../static/js/xadmin.main.js"></script>
<script type="text/javascript" src="../../../static/js/xadmin.responsive.js"></script>
<script type="text/javascript" src="../../../static/js/jquery.ui.effect.js"></script>
<script type="text/javascript" src="../../../static/js/xadmin.plugin.themes.js"></script>
<script type="text/javascript" src="../../../static/js/xadmin.page.dashboard.js"></script>
<script type="text/javascript" src="../../../static/js/xadmin.plugin.portal.js"></script>
<script type="text/javascript" src="../../../static/js/jquery.freetile.min.js"></script>
<script type="text/javascript" src="../../../static/js/base64.js"></script>
    <script type="text/javascript" src="../../../static/js/top-common.js"></script>
  <style type="text/css">
        body.dashboard {
            background-color: #FBFBFB;
            /*font-family: "-apple-system-font,Helvetica Neue,PingFang SC,Microsoft YaHei,sans-serif";*/
            font-family: 400 1em/1.8 'Microsoft Yahei', 'PingFang SC', 'Avenir', 'Segoe UI', 'Hiragino Sans GB', STHeiti, 'Microsoft Sans Serif', 'WenQuanYi Micro Hei', sans-serif;
        }

        ul, li {
            list-style: none;
        }

        a {
            color: #606266;
            display: block;
            text-decoration: none !important;
        }

        a:hover, a:focus {
            /*color: #428bca;*/
            color: #606266;
        }

        hr {
            margin: 20px 0px 10px;
        }

        input {
            outline：none !important;
            padding: 0;
        }

        input:hover, input:focus {
            outline：none !important;
            border: none;
        }

        .padding-left05 {
            margin-left: 10px;
        }

        .mian-width {
            width: 1300px;
            margin: 0 auto;
        }

        .fs12 {
            font-size: 12px;
        }

        .fs14 {
            font-size: 14px;
        }

        .fs16 {
            font-size: 16px;
        }

        .fw700 {
            font-weight: 700;
        }

        .c3 {
            color: #606266;
        }

        .navbar-brand {
            padding: 7px 0;
        }

        .navbar {
            margin-bottom: 0;
        }

        .navbar-collapse {
            padding-left: 0px;
            padding-right: 0px;
        }

        .btn-login {
            border: 1px solid #fff;
            margin-right: 18px;
            padding: 5px 0 !important;
            text-align: center;
            color: #fff !important;
            width: 80px;
            font-size: 14px;
            display: inline-block;
            line-height: 1;
            white-space: nowrap;
            cursor: pointer;
            border-color: #dcdfe6;
            -webkit-appearance: none;
            -webkit-box-sizing: border-box;
            box-sizing: border-box;
            outline: none;
            -webkit-transition: .1s;
            transition: .1s;
            font-weight: 500;
            -moz-user-select: none;
            -webkit-user-select: none;
            -ms-user-select: none;
            border-radius: 4px;
            margin-top: 14px;
        }

        .btn-login:hover {
            background-color: #fff !important;
            color: #525cdc !important;
        }

        .btn-register:hover {
            background-color: #757de3 !important;
            color: #fff !important;
        }

        .btn-register {
            background-color: #525cdc;
            border-color: #525cdc;
        }

        .auth-body-warp {
            display: none;
        }

        .auth-body {
            background-color: rgba(0, 0, 0, 0.8);
            position: fixed;
            top: 0;
            bottom: 0;
            left: 0;
            right: 0;
            z-index: 1030;
            display: flex;
            align-items: center;
        }

        .body-middle {
            width: 100%;
            margin: 0 auto;
        }

        .body-middle form {
            display: flex;
            text-align: center;
            align-items: center;
        }

        .top-img {
            width: 100%;
            text-align: center;
            margin: 0 auto;
        }

        .panel-wrapper {
            width: 100%;
        }

        .panel {
            background-color: #fff;
            width: 440px;
            max-width: 100%;
            border: 1px solid #eee;
            border-radius: 10px;
            z-index: 100;
            padding: 30px 60px;
            margin: 20px auto;
        }

        .body-content {
            width: 1300px;
            margin: 75px auto 0;
        }

        .grabble {
            width: 100%;
        }

        .grabble-left {
            width: 80%;
            float: left;
            position: relative;
        }

        .grabble .grabble-input {
            width: 100%;
            height: 40px;
            padding: 0;
            text-indent: 1em;
            border: 1px solid #dcdfe6;
            border-radius: 5px;
        }

        .grabble-rigth {
            width: 18%;
            float: left;
            margin-left: 17px;
        }

        .grabble-button {
            display: inline-block;
            height: 40px;
            width: 100%;
            color: #fff;
            padding: 0;
            text-align: center;
            line-height: 40px;
            font-size: 16px;
            border-radius: 5px;
        }

        .show-module {
            width: 100%;
            margin-left: -10px;
            position: relative;
        }

        .show-module li.outer-li {
            width: 206px;
            float: left;
            font-size: 14px;
            margin-left: 10px;
            margin-top: 20px;
            text-align: center;
            cursor: pointer;
            border-radius: 5px;
            position: relative;
        }

        .show-module li.outer-li a {
            height: 40px;
            border: 1px solid #dcdfe6;
            line-height: 40px;
            border-radius: 5px;
        }

        .select-a {
            text-align: left;
            text-indent: 0.5em;
            background: url(../../../static/images/cxjt.png) no-repeat scroll 88% center transparent;
            background-size: 15px 8px;
            color: #606266;
        }

        .select-ul {
            position: absolute;
            top: 35px;
            width: 100%;
            margin: 10px auto;
            padding: 0;
            background-color: #fff;
            max-height: 300px;
            border: 1px solid #f5f7fa;
            border-radius: 5px;
            -moz-box-shadow: 2px 2px 13px #919191;
            -webkit-box-shadow: 2px 2px 13px #919191;
            box-shadow: 2px 2px 13px #919191;
            overflow-y: auto;
            z-index: 100;
            display: none;
            color: #606266;
        }

        .select-ul li {
            height: 40px;
            line-height: 40px;
        }

        .select-ul li:hover {
            background-color: #f5f7fa;
        }

        .content-middle-ul {
            width: 100%;
            margin-top: 20px;
        }

        .margin-top0 {
            margin-top: 0;
        }

        .li-titel {
            font-weight: 600;
            font-size: 20px;
        }

        .li-heat {
            text-align: left;
        }

        .close-img {
            float: right;
            width: 30px;
            height: 30px;
            margin-right: -45px;
            margin-top: -10px;
        }

        .user-information {
            overflow: hidden;
            margin: 10px auto 0;
        }

        .user-information img {
            border-radius: 100%;
        }

        .user-color {
            color: #fff;
            text-align: center;
            font-size: 16px;
            line-height: 29px;
            float: right;
        }
        .vip-ico{
            position: relative;
            top: 8px;
            left: -6px;
        }

        .grabble-select {
            width: 85px;
            position: absolute;
            top: 0px;
            min-height: 40px;
            left: 0px;
            background: url(../../../static/images/cxjt.png) no-repeat scroll 88% center transparent;
            background-size: 15px 8px;
            padding: 0;
            border-right: 1px solid #dcdfe6;
        }

        .grabble-select .outer-li {
            position: relative;
            min-height: 40px;
        }

        .grabble-select .outer-li .select-a {
            cursor: pointer;
            height: 40px;
            line-height: 40px;
        }

        .grabble-select .outer-li .select-ul {
            text-align: center;
            z-index: 110;
        }

        .head-content {
            color: #606266;
            margin: 10px auto;
        }

        .new-head-content {
            color: #606266;
            margin: 10px auto 15px;
        }

        .single-page {
            position: absolute;
            width: 315px;
            padding: 15px 15px 0 15px;
            margin: 10px 10px 10px 0;
            border: 1px solid #d4d4d4;
            background-color: #fff;
            border-radius: 5px;
        }

        .mian-img-div {
            width: 100%;
            text-align: center;
            border: 1px solid #ccc;
            margin: 0px auto;
            border-radius: 5px;
            -moz-box-shadow: 2px 2px 15px #c1c1c1;
            -webkit-box-shadow: 2px 2px 15px #c1c1c1;
            box-shadow: 2px 2px 15px #c1c1c1;
        }

        .mian-img {
            width: 96%;
            margin: 5px auto;
        }

        img.head-logo {
            width: 30px;
            height: 30px;
            border-radius: 50%;
            margin: 0px auto;
        }

        .head-content span {
            display: inline-block;
            height: 20px;
            margin-right: 10px;
            font-size: 12px;
        }

        span.span-right {
            cursor: pointer;
            text-align: right;
        }

        .heat-img {
            height: 15px;
            margin-top: -1px;
        }

        .clear {
            clear: both
        }

        a.select-a:hover, a.select-a:focus {
            color: #333;
        }

        .collect-button {
            text-align: right;
        }

        .a-button {
            display: inline-block;
            width: 65px;
            height: 25px;
            border: 1px solid #d8d8d8;
            text-align: center;
            line-height: 25px;
            font-size: 12px;
            color: #606266;
            border-radius: 5px;
            margin-right: 10px;
        }

        .outer-li-alone input {
            width: 100%;
            height: 99%;
            border: none;
            opacity: 0;
        }

        .label-explain {
            width: 100%;
        }

        .label-explain-title {
            width: 50px;
            float: left;
            margin-top: 10px;
        }

        .label-explain-content {
            width: 90%;
            float: left;
        }

        .label-explain-content .span {
            color: #7c6fab;
            background-color: #e2e7ff;
            border: 1px solid #d8d8d8;
            padding: 1px 10px;
            border-radius: 50px;
            display: inline-block;
            margin-top: 10px;
            margin-left: 5px;
        }

        .label-explain-content span img {
            margin-left: 5px;
            cursor: pointer;
        }

        .calendar-bg {
            background: url(../../../static/images/calendar.png) no-repeat 23px center;
        }
        .navbar-brand img{
        display: block;
          height: 26px;
      }
      .navbar-brand i{
          display: block;
          font-family: 黑体;
          font-size: 14px;
          letter-spacing: 17px;
          color: #fff;
      }
    </style>

</head>

<body>
<div id="top-nav" class="navbar navbar-xs navbar-inverse navbar-fixed-top">
    <div class="mian-width">
        <div class="navbar-header">
            <a class="navbar-brand" href="/index"><img src="../../../static/images/icon.png"
                                                       style="margin-right: 5px"/><i>优化师加速器</i></a>
        </div>
        <div class="navbar-collapse collapse" id="login_ul">
            <ul class="nav navbar-nav pull-right" id="loginUl" style="display: block;">
                <li class="dropdown g-theme">
                    <a class="btn-login" id="btnLogin">
                        登录
                    </a>

                </li>
                <li class="dropdown g-theme">
                    <a class="btn-login btn-register" id="btnRegister" style="margin-right: 10px;">
                        注册
                    </a>

                </li>

            </ul>

            <ul class="nav navbar-nav pull-right" style="display:none;position: relative;margin-right: 8px;"
                id="userList">
                <li class="dropdown user-information" style="cursor:pointer;margin-top: 15px">
                    <img src="../../../static/images/head.png" style="width: 30px;height: 30px;" id="show_list"/>
                    <img class="vip-ico" src="../../../static/images/vip.png" alt="">
                    <div class="user-color" id="company_name"></div>
                </li>
                <ul style="display:none;position: absolute;padding: 0;background-color: #fff;max-height: 300px;border: 1px solid #f5f7fa;border-radius: 5px;-moz-box-shadow:2px 2px 13px #919191; -webkit-box-shadow:2px 2px 13px #919191; box-shadow:2px 2px 13px #919191;overflow-y: auto;z-index: 100;color: #606266;width: 150px;text-align: center;left:-46px;top:65px;"
                    id="buttonList">
                    <li style="line-height: 40px;height: 40px;font-size: 14px;">
                        <a style="display: block;cursor:pointer;" id="user_page">
                            <img src="../../../static/images/YHXX.png"/>
                            用户信息
                        </a>
                    </li>
                    <li style="line-height: 40px;height: 40px;font-size: 14px;">
                        <a style="display: block;cursor:pointer;" id="collect_page">
                            <img src="../../../static/images/sc.png"/>
                            收藏列表
                        </a>
                    </li>
                     <li style="line-height: 40px;height: 40px;font-size: 14px;">
                        <a style="display: block;cursor:pointer;" id="order_page">
                            <img src="../../../static/images/order.png"/>
                            充值记录
                        </a>
                    </li>
                    <li style="line-height: 40px;height: 40px;font-size: 14px;cursor:pointer;" id="out">
                        <a style="display: block;">
                            <img src="../../../static/images/TCDL.png"/>
                            退出登录
                        </a>
                    </li>
                </ul>

            </ul>
            <ul class="nav navbar-nav pull-right" style="display: block;">
                <li class="dropdown g-theme">
                    <a href="/purchase_page" target="_blank" class="btn-login ">
                        价格套餐
                    </a>

                </li>
            </ul>
            <ul class="nav navbar-nav pull-right" style="display: block;">
                <li class="dropdown g-theme">
                    <a href="/product_introduction" target="_blank" class="btn-login">
                        产品介绍
                    </a>

                </li>
            </ul>
            <ul class="nav navbar-nav pull-right" style="display: block;">
                <li class="dropdown g-theme">
                    <a href="/show_ad_school" target="_blank" class="btn-login ">
                        知识学院
                    </a>

                </li>
            </ul>

        </div>
    </div>
</div>

<!--订单记录开始-->
<div class="order-record-wrapper">
    <div class="order-record-title">
        <h2>充值记录</h2>
    </div>

    <div class="order-record-main">
        <ul id="pay_order_list" class="order-record-list">

        </ul>
        <div style="text-align: right;">
            <ul id="order_paginator" class="pagination ">

            </ul>
        </div>
    </div>
</div>
<!--订单记录结束-->

<div class="footer_bg">
    <div class="foot1">
        <p class="foot1_txt">Add:广东省广州市天河区中山大道西1132号410-411室</p>
        <p class="foot1_txt">Tel:400-858-8225</p>
    </div>
    <div class="foot">
        <p class=" foot_txt">COPYRIGHT (C) 2014-2016 广东原昇信息科技有限公司. ALL RIGHTS RESERVED
            <a href="http://www.miitbeian.gov.cn" style="color:#278FCF !important;">备案号：粤ICP备16061139号-2</a>
        </p>

    </div>
</div>

    <script type="text/javascript" src="../../../static/js/jq-paginator.js"></script>
<script type="text/javascript">
    $(function () {
        $.ajax({
            type: 'get',
            url: '/order_record/?page=1',
            success: function (data) {
                totalCounts = parseInt(data.total_counts)
                if (totalCounts == 0) {
                    totalCounts = 1
                }
                $("#order_paginator").jqPaginator({
                    totalCounts: totalCounts,//设置分页的总条目数
                    visiblePages: 7,//设置最多显示的页码数注意：要么设置totalPages，要么设置totalCounts + pageSize，否则报错；设置了totalCounts和pageSize后，会自动计算出totalPages。
                    currentPage: parseInt(data.current_page),//当前页
                    pageSize: 10,
                    onPageChange: function (n) {
                        $.ajax({
                            type: 'get',
                            url: '/order_record/?page=' + n,
                            success: function (data) {
                                console.log(data)
                                var current_data_count = 0;
                                $("#pay_order_list").html('')
                                $("#pay_order_list").append(
                                    "<li><ul><li>充值编号</li><li>充值时间</li><li>产品名称</li><li>金额</li></ul></li>"
                                );
                                data.data.forEach(function (val) {
                                    current_data_count += 1;
                                    var order = val.fields;
                                    $("#pay_order_list").append(
                                        "<li><ul>" +
                                        "<li value=" + order.trade_no + ">" + order.trade_no + "</li>" +
                                        "<li value=" + order.start_time + ">" + order.start_time.replace('T', ' ').split('.')[0] + "</li>" +
                                        "<li value=" + order.vip_version + ">" + order.vip_version + "</li>" +
                                        "<li value=" + order.total_amount + ">" + order.total_amount + "</li>" +
                                        "</ul></li>"
                                    );
                                })

                                {#if (current_data_count < 10) {#}
                                {#    for (i = 0; i < 10 - current_data_count; i++) {#}
                                {#        $("#pay_order_list").append(#}
                                {#            "<li><ul>" +#}
                                {#            "<li></li>" +#}
                                {#            "<li></li>" +#}
                                {#            "<li></li>" +#}
                                {#            "<li></li>" +#}
                                {#            "</ul></li>"#}
                                {#        );#}
                                {#    }#}
                                {#}#}
                            }
                        })

                    }
                });
            }
        })
    })

</script>
</body>

</html>